<template>
	<view class="problem-container">
		<!-- #ifdef MP-WEIXIN -->
		<!-- 顶部导航 -->
		<qmy-custom-navbar :title="'常见问题'"></qmy-custom-navbar>
		<!-- #endif -->
		<!-- 加载中蒙版 -->
		<qmy-mask-load :dataLoaded="dataLoaded"></qmy-mask-load>

		<view :style="{paddingTop:menuObject.height + menuObject.top +8 + 'px'}">
			<!-- 分类列表 -->
			<v-tabs ref="tabs" :zIndex="1" bgColor="#ffffff00" pillsColor="#ffffff00" fontSize="28rpx" pillsStyle="box"
				activeFontSize="28rpx" lineHeight="4rpx" field="name" :lineScale="0.2"
				activeColor="linear-gradient(to right, #14cc60, #14cc60)" paddingItem="0rpx 40rpx"
				color="linear-gradient(to right, #616161, #616161)" lineColor="#14cc60" v-model="currentCategory"
				:tabs="categories"></v-tabs>

			<!-- 问题列表 -->
			<view class="qa-list">
				<view v-for="(item, index) in currentArticles" :key="index" class="qa-item"
					@click="toggleAnswer(index)">
					<view class="question">
						<text>{{ item.title }}</text>
						<text class="arrow" :class="{ 'arrow-down': item.show }">›</text>
					</view>
					<view class="answer-wrapper" :class="{ 'answer-wrapper-show': item.show }">
						<view class="answer">
							<mp-html :content="item.content || ''" />
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部定位发布按钮 -->
		<button @click="publish" style="height: auto;line-height: 40rpx;border-radius: 0rpx;" open-type="contact"
			class="w-100 fixed-bottom bac-col-00b">
			<view class="w-100 bg-col-00b text-ali-c">
				<view class="fs-30 col-f fw-600">联系客服</view>
			</view>
		</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//顶部导航
				// #ifdef MP-WEIXIN
				menuObject: uni.getMenuButtonBoundingClientRect(),
				// #endif
				// #ifndef MP-WEIXIN
				menuObject: 0,
				// #endif
				currentCategory: 0,
				categories: [],
				dataLoaded: false
			}
		},
		computed: {
			currentArticles() {
				return this.categories[this.currentCategory]?.articles || []
			}
		},
		onLoad() {
			// 请求问题分类
			this.getCategories()
		},
		methods: {
			getCategories() {
				// 请求问题分类
				this.$Route('get-public-data', true).getProblemCategories().then((res) => {
					this.categories = res.data
					this.dataLoaded = true
					this.$refs.tabs.update(); //适配tabs栏滑块初始位置错误问题
				}).catch((err) => {
					console.error('遇到错误:', err); // 打印错误信息
					this.dataLoaded = true
				});
			},
			switchCategory(index) {
				this.currentCategory = index
			},
			toggleAnswer(index) {
				if (this.currentArticles[index]) {
					this.$set(this.currentArticles[index], 'show', !this.currentArticles[index].show)
				}
			}
		}
	}
</script>

<style>
	.problem-container {
		min-height: 100vh;
		background: #fff;
		padding-bottom: 120rpx;
	}

	.header {
		height: 200rpx;
		background: linear-gradient(to bottom, #14cc60, #ffffff);
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
	}

	.title {
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
	}

	.qa-list {
		padding: 20rpx;
	}

	.qa-item {
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: all 0.3s ease;
	}

	.qa-item:active {
		transform: scale(0.98);
	}

	.question {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #333;
	}

	.arrow {
		color: #999;
		font-size: 32rpx;
		transform: rotate(90deg);
		transition: transform 0.3s ease;
	}

	.arrow-down {
		transform: rotate(-90deg);
	}

	.answer-wrapper {
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease-out;
	}

	.answer-wrapper-show {
		max-height: 300rpx;
	}

	.answer {
		margin-top: 20rpx;
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		padding: 20rpx;
		background: #f8f8f8;
		border-radius: 8rpx;
		opacity: 0;
		transform: translateY(-10rpx);
		transition: all 0.3s ease 0.1s;
	}

	.answer-wrapper-show .answer {
		opacity: 1;
		transform: translateY(0);
	}

	.contact-btn {
		position: fixed;
		bottom: 40rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		align-items: center;
		justify-content: center;
		width: 300rpx;
		height: 80rpx;
		background: #14cc60;
		color: #fff;
		border-radius: 40rpx;
		font-size: 28rpx;
		box-shadow: 0 4rpx 16rpx rgba(20, 204, 96, 0.3);
		transition: all 0.3s ease;
	}

	.contact-btn:active {
		transform: translateX(-50%) scale(0.95);
	}

	.contact-icon {
		width: 36rpx;
		height: 36rpx;
		margin-right: 10rpx;
	}

	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateX(-50%) scaleX(0);
		}

		to {
			opacity: 1;
			transform: translateX(-50%) scaleX(1);
		}
	}

	.fixed-bottom {
		position: fixed;
		bottom: 0;
		width: 100%;
		padding-top: 30rpx;
		padding-bottom: 30rpx !important;
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom)) !important;
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom)) !important;
		z-index: 99;
		transition: background-color 0.2s ease;
	}

	.fixed-bottom:active {
		background-color: #11b051 !important;
		/* 点击时背景颜色变化 */
	}
</style>